<?php ?>
<!DOCTYPE html>
<html>
   <head>
      <title>New Page</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type='text/javascript'>
         
         var selected_node = null;
      
         function highlight_node(node)
         {
            // node.realborder = node.css('border');
            // node.realmargin = node.css('margin');
            
            // var newmargin = parseInt(node.realmargin) - 3;
            
            // node.css('border', "3px solid yellow");
            // node.css('margin', newmargin + 'px');
            
            node.css('outline', "3px solid #FFE000");
         }
         
         function unhighlight_node(node)
         {
            // node.css('border', node.realborder);
            // node.css('margin', node.realmargin);
            
            node.css('outline', "none");
         }
         
         function set_selected(node)
         {
            if (null != selected_node)
            {
               unhighlight_node(selected_node);
            }
            
            selected_node = node;
            
            if (null != selected_node)
            {
               highlight_node(selected_node);
            }
         }
         
         function dom_set_selected(node)
         {
            if (0 == $(node).size())
            {
               return;
            }
            
            set_selected(node);
         }
         
         function dom_up(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).parent());
         }
         
         function dom_prev(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).prev());
         }
         
         function dom_next(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).next());
         }
         
         function dom_down(node)
         {
            dom_set_selected($(node).children().first());
         }
         
         function dom_keypress(key)
         {
            // Left
            if (37 == key.keyCode)
            {
               dom_up(selected_node);
            }
            
            // Up
            else if (38 == key.keyCode)
            {
               dom_prev(selected_node);
            }
            
            // Right
            else if (39 == key.keyCode)
            {
               dom_down(selected_node);
            }
            
            // Down
            else if (40 == key.keyCode)
            {
               dom_next(selected_node);
            }
         }
         
         $(function()
         {
            set_selected($('body'));
            
            $(document).keydown(dom_keypress);
         });
         
      </script>
   </head>
   <body>
      <div style="margin:10px; width:300px; height:120px; background-color:green;"></div>
      <div style="margin:10px; width:300px; height:120px; background-color:red;"></div>
   </body>
</html>